<!doctype html>
<html lang="en">	
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>08.运算符和类型转换-作业</title>
		<style>
			*{margin:0;padding:0;}
			a{text-decoration:none;}
			ul,li{list-style:none;}
			body{font-size:12px;font-family:"微软雅黑";}
			.box{
				width:600px;
				height:300px;
				margin:100px auto;
			}
			.box .oLi{
				width:600px;
				height:210px;
			}
			.box .oLi li{
				width:600px;
				height:30px;
				/* text-indent:4em; */
				font-size:14px;
				line-height:15px;
				vertical-align:bottom;
			}
			.box .oLi li:nth-child(odd){
				background:#66f;
			}
			.box .oLi li:nth-child(even){
				background:#0c3;
			}
			.box .oLi li:last-child{
				background:#fff;
			}
			.box .oLi li .oImg{
				display:inline-block;
				width:20px;
				height:20px;
				background:url("ck.png");
				margin:5px 20px 0 10px;
				vertical-align:bottom;
			}
		</style>
	</head>
	<body>
		
		<div class="box">
			<ul class="oLi">
				<li><i class="oImg"></i>11111111</li>
				<li><i class="oImg"></i>22222222</li>
				<li><i class="oImg"></i>33333333</li>
				<li><i class="oImg"></i>44444444</li>
				<li><i class="oImg"></i>55555555</li>
				<li><i class="oImg"></i>66666666</li>
				<li><i class="oImg"></i>77777777</li>
				<li><i class="oImg"></i>全选</li>
			</ul>	
		</div>
		<script src="../js/jquery-1.12.2.min.js""></script>
		<script src="../js/dom.js"></script>
		<script type="text/javascript">
			
			var domLi = document.getElementsByTagName("li");
			var domI = document.getElementsByClassName("oImg");
			var num =0;
			//鼠标移入移出事件
			domLi[0].onmouseover = function(){
				domLi[0].style.backgroundColor="red";
			}
			domLi[0].onmouseout = function(){
				domLi[0].style.backgroundColor="#66f";
			}
			domLi[1].onmouseover = function(){
				domLi[1].style.backgroundColor="red";
			}
			domLi[1].onmouseout = function(){
				domLi[1].style.backgroundColor="#0c3";
			}
			domLi[2].onmouseover = function(){
				domLi[2].style.backgroundColor="red";
			}
			domLi[2].onmouseout = function(){
				domLi[2].style.backgroundColor="#66f";
			}
			domLi[3].onmouseover = function(){
				domLi[3].style.backgroundColor="red";
			}
			domLi[3].onmouseout = function(){
				domLi[3].style.backgroundColor="#0c3";
			}
			domLi[4].onmouseover = function(){
				domLi[4].style.backgroundColor="red";
			}
			domLi[4].onmouseout = function(){
				domLi[4].style.backgroundColor="#66f";
			}
			domLi[5].onmouseover = function(){
				domLi[5].style.backgroundColor="red";
			}
			domLi[5].onmouseout = function(){
				domLi[5].style.backgroundColor="#0c3";
			}
			domLi[6].onmouseover = function(){
				domLi[6].style.backgroundColor="red";
			}
			domLi[6].onmouseout = function(){
				domLi[6].style.backgroundColor="#66f";
			}
			//鼠标点击事件
			var bool = true;
			domI[0].onclick = function(){
				if(bool){
					domI[0].style.backgroundImage = "url(cked.jpg)";
					num++;
					if(num<7){
						domI[7].style.backgroundImage = "url(ck.png)";
					}else{
						domI[7].style.backgroundImage = "url(cked.jpg)";
					}
					bool=!bool;
					
				}else{
					domI[0].style.backgroundImage = "url(ck.png)";
					num--;
					if(num<7){
						domI[7].style.backgroundImage = "url(ck.png)";
					}else{
						domI[7].style.backgroundImage = "url(cked.jpg)";
					}
					bool=!bool;
					
				}
				
			}
			domI[1].onclick = function(){
				if(bool){
					domI[1].style.backgroundImage = "url(cked.jpg)";
					bool=!bool;
					num++;
					if(num<7){
						domI[7].style.backgroundImage = "url(ck.png)";
					}else{
						domI[7].style.backgroundImage = "url(cked.jpg)";
					}
				}else{
					domI[1].style.backgroundImage = "url(ck.png)";
					bool=!bool;
					num--;
					if(num<7){
						domI[7].style.backgroundImage = "url(ck.png)";
					}else{
						domI[7].style.backgroundImage = "url(cked.jpg)";
					}
				}
			}
			domI[2].onclick = function(){
				if(bool){
					domI[2].style.backgroundImage = "url(cked.jpg)";
					bool=!bool;
					num++;
					if(num<7){
						domI[7].style.backgroundImage = "url(ck.png)";
					}else{
						domI[7].style.backgroundImage = "url(cked.jpg)";
					}
				}else{
					domI[2].style.backgroundImage = "url(ck.png)";
					bool=!bool;
					num--;
					if(num<7){
						domI[7].style.backgroundImage = "url(ck.png)";
					}else{
						domI[7].style.backgroundImage = "url(cked.jpg)";
					}
				}
			}
			domI[3].onclick = function(){
				if(bool){
					domI[3].style.backgroundImage = "url(cked.jpg)";
					bool=!bool;
					num++;
					if(num<7){
						domI[7].style.backgroundImage = "url(ck.png)";
					}else{
						domI[7].style.backgroundImage = "url(cked.jpg)";
					}
				}else{
					domI[3].style.backgroundImage = "url(ck.png)";
					bool=!bool;
					num--;
					if(num<7){
						domI[7].style.backgroundImage = "url(ck.png)";
					}else{
						domI[7].style.backgroundImage = "url(cked.jpg)";
					}
				}
			}
			domI[4].onclick = function(){
				if(bool){
					domI[4].style.backgroundImage = "url(cked.jpg)";
					bool=!bool;
					num++;
					if(num<7){
						domI[7].style.backgroundImage = "url(ck.png)";
					}else{
						domI[7].style.backgroundImage = "url(cked.jpg)";
					}
				}else{
					domI[4].style.backgroundImage = "url(ck.png)";
					bool=!bool;
					num--;
					if(num<7){
						domI[7].style.backgroundImage = "url(ck.png)";
					}else{
						domI[7].style.backgroundImage = "url(cked.jpg)";
					}
				}
			}
			domI[5].onclick = function(){
				if(bool){
					this.style.backgroundImage = "url(cked.jpg)";
					num++;
					console.log(num);
					if(num<7){
						domI[7].style.backgroundImage = "url(ck.png)";
					}else{
						domI[7].style.backgroundImage = "url(cked.jpg)";
					}
				}else{
					this.style.backgroundImage = "url(ck.png)";
					num--;
					
					if(num<7){
						domI[7].style.backgroundImage = "url(ck.png)";
					}else{
						domI[7].style.backgroundImage = "url(cked.jpg)";
					}
				}
				bool=!bool;
			}
			domI[6].onclick = function(){
				if(bool){	
					this.style.backgroundImage = "url(cked.jpg)";
					num++;
					console.log(num);
					if(num<7){
						domI[7].style.backgroundImage = "url(ck.png)";
					}else{
						domI[7].style.backgroundImage = "url(cked.jpg)";
					}	
				}else{
					this.style.backgroundImage = "url(ck.png)";
					num--;
					console.log(num);
					if(num<7){
						domI[7].style.backgroundImage = "url(ck.png)";
					}else{
						domI[7].style.backgroundImage = "url(cked.jpg)";
					}
				}
				bool=!bool;
			}
			
			
			domI[7].onclick = function(){
				if(bool){
					domI[7].style.backgroundImage = "url(cked.jpg)";
					domI[0].style.backgroundImage = "url(cked.jpg";
					domI[1].style.backgroundImage = "url(cked.jpg)";
					domI[2].style.backgroundImage = "url(cked.jpg)";
					domI[3].style.backgroundImage = "url(cked.jpg)";
					domI[4].style.backgroundImage = "url(cked.jpg)";
					domI[5].style.backgroundImage = "url(cked.jpg)";
					domI[6].style.backgroundImage = "url(cked.jpg)";
					num=7;
					console.log(num);
				}else{
					domI[7].style.backgroundImage = "url(ck.png)";
					domI[0].style.backgroundImage = "url(ck.png)";
					domI[1].style.backgroundImage = "url(ck.png)";
					domI[2].style.backgroundImage = "url(ck.png)";
					domI[3].style.backgroundImage = "url(ck.png)";
					domI[4].style.backgroundImage = "url(ck.png)";
					domI[5].style.backgroundImage = "url(ck.png)";
					domI[6].style.backgroundImage = "url(ck.png)";
					num=0;
					console.log(num);
				}
				bool=!bool;
			}
			
		</script>	
		
		
	</body>
</html>
